<template>
  <div class="wall-message">
    <p class="title">{{ wallType[id].name }}</p>
    <p class="slogan">{{ wallType[id].slogan }}</p>

    <div class="label">
      <p
        class="label-list"
        :class="{ lbselected: nlabel == -1 }"
        @click="selectNode(-1)"
      >
        全部
      </p>
      <p
        class="label-list"
        :class="{ lbselected: nlabel == index }"
        v-for="(item, index) in label[id]"
        :key="index"
        @click="selectNode(index)"
      >
        {{ item }}
      </p>
    </div>

    <div class="card" :style="{ width: nWidth + 'px' }" v-show="id == 0">
      <!-- 卡片组件 -->
      <note-card-vue
        v-for="(item, index) in cards"
        :key="index"
        :note="item"
        class="card-inner"
        width="288px"
        :class="{ cardselected: index === cardSelected }"
        @toDetail="changeCard(index)"
      >
      </note-card-vue>
    </div>

    <!-- 没有卡片时的状态 -->
    <div class="none-msg" v-if="isOk == 0">
      <img :src="none[id].url" />
      <!-- <svg-icon :icon="none[id].url"></svg-icon>  这里自己封装的svg-icon 好像不能动态绑定 之后再解决 但也可能是数据要用.value?-->
      <!-- <svg-icon icon="card"></svg-icon> -->
      <p>{{ none[id].msg }}</p>
    </div>

    <div class="loading" v-show="isOk == -1">
      <div id="lottile"></div>
      <p>加载中...</p>
    </div>

    <p class="nomore" v-show="isOk == 2">没有更多了...</p>

    <!-- 照片墙 -->
    <div class="photo" v-show="id == 1">
      <photo-card-vue
        :photo="item"
        class="photo-card"
        v-for="(item, index) in photo.data"
        :key="index"
        @click="changeCard(index)"
      >
      </photo-card-vue>
    </div>

    <!-- 留言按钮 -->
    <div
      class="add"
      :style="{ bottom: addBottom + 'px' }"
      @click="addCard"
      v-show="!isModal"
    >
      <svg-icon icon="add"></svg-icon>
    </div>

    <!-- 弹窗组件 -->
    <modal-vue :title="title" @close="closeModal" :isClose="isModal">
      <new-card-vue
        :id="id"
        @cancel="closeModal"
        v-if="cardSelected === -1"
        @clickBtn="addNewCard"
      ></new-card-vue>
      <card-detail-vue v-else :card="cards[cardSelected]"></card-detail-vue>
    </modal-vue>

    <!-- 照片浏览 -->
    <photo-view-vue
      :isView="isView"
      :photos="photoArr"
      :nowNumber="cardSelected"
      @viewSwitch="viewSwitch"
    >
    </photo-view-vue>

    <!-- <message-vue></message-vue> -->
  </div>
</template>

<script setup>
import NoteCardVue from "@/components/NoteCard.vue";
import ModalVue from "@/components/Modal.vue";
import NewCardVue from "@/components/NewCard.vue";
import CardDetailVue from "@/components/CardDetail.vue";
import PhotoCardVue from "@/components/PhotoCard.vue";
import PhotoViewVue from "@/components/PhotoView.vue";
import lottie from "lottie-web";
import loading from "@/assets/images/loading.json";
import { wallType, label, none } from "@/utils/data";
import { photo } from "../../mock/index";
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from "vue";
import { useRoute } from "vue-router";
import { findWallPageApi } from "@/api/index";
import { useStore } from "vuex";
const store = useStore();
// import MessageVue from '@/components/wall/message/Message.vue'
// const router = useRouter()
const route = useRoute();
// 留言墙与照片墙的切换id
const id = computed(() => {
  return route.query.id;
});

const user = computed(() => {
  return store.state.user;
});

let cards = ref([]);
let isOk = ref(-1); // 是否加载中 -1为加载中 0为没有拿到数据
let page = ref(1);
let pageSize = ref(10);

// 点击照片或留言的小卡片 右侧弹出面板 显示标签不一样
// const cards = computed(() => {
//   let a = ''
//   if (route.query.id == 0) {
//     a = note.value
//   } else if (route.query.id == 1) {
//     a = photo.data
//   }
//   return a
// })

let isView = ref(false); // 预览大图
let nlabel = ref(-1); // 当前对应的标签
// add按钮距离底部高度
let addBottom = ref(30);
// 新建标题
let title = ref("写留言");
// 是否显示弹窗
let isModal = ref(false);
let cardSelected = ref(-1); // 当前选择的卡片
let photoArr = ref([]); // 图片列表

const getPhoto = () => {
  for (let i = 0; i < photo.data.length; i++) {
    photoArr.value.push(photo.data[i].imgurl);
  }
};

// 点击卡片 改变卡片选中状态
const changeCard = (e) => {
  title.value = "";
  if (e !== cardSelected.value) {
    cardSelected.value = e;
    isModal.value = true;
    if (id.value == 1) {
      isView.value = true;
    }
  } else {
    cardSelected.value = -1; // 点击两次 选中状态消失
    isModal.value = false;
    if (id.value == 1) {
      isView.value = false;
    }
  }
};

// 切换留言墙和照片墙时候 这些都要关闭
watch(id, () => {
  // console.log(`a从${oldValue}变成了${newValue}`)
  isModal.value = false;
  isView.value = false;
  nlabel.value = -1;
  cardSelected.value = -1;
});

// 卡片模块宽度
let nWidth = ref(0);
// 处理宽度的方法
const noteWidth = () => {
  // 页面宽度
  let wWidth = document.body.clientWidth;
  // console.log(wWidth)
  nWidth.value = Math.floor((wWidth - 120) / 300) * 300;
  // console.log('卡片宽度', nWidth.value)
};

// 切换label
const selectNode = (e) => {
  nlabel.value = e;
  // 清空当前数据
  cards.value = [];
  page.value = 1;
  getWallCard(id.value);
};

// 切换图片
const viewSwitch = (e) => {
  if (e == 0) {
    cardSelected.value--;
  } else if (e == 1) {
    cardSelected.value++;
  }
};
// 监听页面滚动
const scrollBottom = () => {
  // 距离顶部高度
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // 屏幕高度高度
  let clientHeight = document.documentElement.clientHeight;
  // 内容高度
  let scrollHeight = document.documentElement.scrollHeight;
  // 底部footerbar的高度为200
  if (scrollTop + clientHeight + 230 > scrollHeight) {
    addBottom.value = scrollTop + clientHeight + 230 - scrollHeight;
  } else {
    addBottom.value = 30;
  }

  // 加载更多
  if (scrollTop + clientHeight <= scrollHeight) {
    getWallCard(id.value);
  }
};

// 切换窗口打开与关闭
const closeModal = () => {
  isModal.value = false;
  if (id.value == 1) {
    isView.value = false;
  }
};

// 点击留言按钮
const addCard = () => {
  title.value = "写留言";
  isModal.value = true;
};

// 前端插入卡片
const addNewCard = (e) => {
  // console.log("点击了确定", e);
  cards.value.unshift(e);
  closeModal();
};

// 加载动画
const loadingAnima = () => {
  if (isOk.value == -1) {
    nextTick(async () => {
      var params1 = {
        container: document.getElementById("lottile"),
        renderer: "svg",
        loop: true,
        autoplay: true,
        animationData: loading,
      };
      lottie.loadAnimation(params1);
    });
  }
};

// 获取卡片
const getWallCard = (id) => {
  // 只有page>0才执行
  if (page.value > 0) {
    isOk.value = -1;
    let data = {
      type: id,
      page: page.value,
      pageSize: pageSize.value,
      userId: user.value.id, // 时间问题导致 可能会出现undefined
      label: nlabel.value,
    };
    // console.log(data)
    findWallPageApi(data).then((res) => {
      cards.value = cards.value.concat(res.message);
      // console.log(cards.value[0]);
      // 设置下一次的page
      // console.log(res.message)
      // console.log('cards--', cards)
      if (res.message.length) {
        page.value++;
      } else {
        page.value = 0;
        isOk.value = 2;
      }

      if (cards.value.length > 0) {
        isOk.value = 1;
        if (page.value == 0) {
          isOk.value = 2;
        }
      } else {
        isOk.value = 0;
      }

      // 如果为图片将图片单独拿出来
      if (id.value == 1) {
        for (let i = 0; i < cards.value.length; i++) {
          photoArr.push(cards.value[i].imgurl);
        }
      }
    });
  }
};

const getUser = () => {
  let timer = setInterval(() => {
    // console.log(user.value.id, 'user-----value')
    if (user) {
      clearInterval(timer);
      getWallCard(id.value);
    }
  }, 1000);
};

onMounted(() => {
  noteWidth();
  getPhoto();
  loadingAnima();
  // getWallCard(0)
  getUser();
  // 监听屏幕宽度变化
  window.addEventListener("resize", noteWidth);
  // 监听滚动高度变化
  window.addEventListener("scroll", scrollBottom);
});
onUnmounted(() => {
  // 监听屏幕宽度变化
  window.addEventListener("resize", noteWidth);
  window.addEventListener("scroll", scrollBottom);
});
</script>

<style lang="less" scoped>
.wall-message {
  min-height: 600px;
  padding-top: 52px;

  .title {
    padding-top: 48px;
    padding-bottom: @padding-8;
    font-size: 56px;
    color: @gray-0;
    text-align: center;
    font-weight: 600;
  }

  .slogan {
    color: @gray-2;
    text-align: center;
  }

  .label {
    display: flex;
    justify-content: center;
    margin-top: 40px;

    .label-list {
      padding: 0 14px;
      height: 30px;
      display: flex;
      align-items: center;
      margin: @padding-4;
      color: @gray-2;
      box-sizing: border-box;
      cursor: pointer;
    }

    .lbselected {
      color: @gray-0;
      font-weight: 600;
      border: 1px solid @gray-0;
      border-radius: 14px;
    }
  }

  .card {
    display: flex;
    flex-wrap: wrap;
    padding-top: 28px;
    padding-bottom: 30px;
    margin: auto;
    // 这样居中最快 但是最后一行排列方式 不是想要的 用js计算来居中 noteWidth()
    // justify-content: center;

    .card-inner {
      margin: 6px;
    }

    // 卡片选中后样式
    .cardselected {
      border: 1px solid @primary-color;
    }
  }

  // 添加按钮样式
  .add {
    width: 56px;
    height: 56px;
    background: @gray-0;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    border-radius: 28px;

    position: fixed;
    right: 30px;
    // bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: @tr;

    .svg-icon {
      color: @gray-10;
      font-size: 24px;
    }
  }

  // 照片 瀑布流
  .photo {
    width: 88%;
    margin: 0 auto;
    columns: 6; // 6列
    column-gap: @padding-4; // 左右间距
    padding-top: 28px;
    padding-bottom: 30px;

    .photo-card {
      margin-bottom: @padding-4; // 上下间距
      break-inside: avoid; // 防止换行错乱
    }
  }

  .none-msg {
    width: 100%;
    text-align: center;
    padding-top: 80px;
    position: absolute;
    top: 280px;
    z-index: 9999;

    img {
      display: inline;
      width: 96px;
    }

    p {
      font-family: serif;
      font-weight: 700;
      font-size: 24px;
      color: @gray-0;
    }
  }

  .loading {
    text-align: center;
    width: 100%;

    // 这里直接写p不知道为什么没有样式 打开浏览器 检查元素 发现选择器长这样
    p[data-v-7653b013] {
      padding: 0;
      color: blue;
      font-size: 24px;
      font-family: serif;
      margin-top: -35px;
    }
  }

  #lottile {
    margin-top: 20px;
    height: 200px;
  }

  .nomore {
    text-align: center;
    color: @gray-2;
    padding: 20px;
  }
}
</style>
